<template>
  <div class="app-container">
    <el-tabs type="border-card" @tab-click="handleClick">
      <el-tab-pane label="用户线索">
        <div class="filter-container">
          <el-input
            v-model="listQuery.userId"
            clearable
            placeholder="userId"
            style="width: 120px;"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <el-select
            v-model="listQuery.accountName"
            clearable
            placeholder="机构名称"
            style="width: 200px;"
            class="filter-item"
          >
            <el-option
              v-for="(item, index) in selectArr"
              :key="index"
              :value="item.nickName"
              :label="item.nickName"
              @click.native="getSelect(item)"
            >
              {{ item.nickName }}
            </el-option>
          </el-select>
          <el-button
            v-waves
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            搜索
          </el-button>
        </div>
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="tableData"
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column label="userId" align="center" width="100">
            <template slot-scope="{ row }">
              <span>{{ row.user_id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" align="center" width="70">
            <template slot-scope="{ row }">
              <span>{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="手机号" class-name="status-col" width="110">
            <template slot-scope="{ row }">
              {{ row.phone }}
            </template>
          </el-table-column>
          <el-table-column label="提交时间" min-width="160" align="center">
            <template slot-scope="{ row }">
              <span>{{ timestampToTime(row.creat_time) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="投放时间" min-width="160" align="center">
            <template slot-scope="{ row }">
              <span>{{
                row.push_time ? timestampToTime(row.push_time) : '-'
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="居住城市" min-width="100" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.province }}{{ row.city }}</span>
            </template>
          </el-table-column>
          <el-table-column label="失败原因" min-width="150" align="center">
            <el-popover
              placement="top-start"
              title="失败原因"
              width="200"
              trigger="hover"
              slot-scope="{ row }"
            >
              <span>{{ row.matching_msg }}</span>
              <el-button slot="reference" class="errorInfo">{{
                row.matching_msg
              }}</el-button>
            </el-popover>
          </el-table-column>
          <!-- <el-table-column label="匹配展示机构" align="center" width="200">
            <template slot-scope="{ row }">
              <span>{{ row.mechanismName }}</span>
            </template>
          </el-table-column> -->
          <el-table-column
            label="投放状态"
            align="center"
            min-width="100"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row }">
              <el-tag v-if="row.matching_status == 0" type="danger"
                >失败</el-tag
              >
              <el-tag v-if="row.matching_status == 1">成功</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            label="投放机构名称"
            align="center"
            min-width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row }">
              <span>{{ row.push_msg }}</span>
            </template>
          </el-table-column>

          <el-table-column label="房" class-name="status-col" width="60">
            <template slot-scope="{ row }">
              {{ row.house }}
            </template>
          </el-table-column>
          <el-table-column label="车" class-name="status-col" width="60">
            <template slot-scope="{ row }">
              {{ row.car }}
            </template>
          </el-table-column>
          <el-table-column label="公积金" class-name="status-col" width="100">
            <template slot-scope="{ row }">
              {{ row.accumulation }}
            </template>
          </el-table-column>
          <el-table-column label="芝麻分" class-name="status-col" width="100">
            <template slot-scope="{ row }">
              {{ row.new_sesame_seed }}
            </template>
          </el-table-column>
          <el-table-column label="京东白条" class-name="status-col" width="120">
            <template slot-scope="{ row }">
              {{ row.white_stripe }}
            </template>
          </el-table-column>
          <el-table-column label="花呗额度" class-name="status-col" width="120">
            <template slot-scope="{ row }">
              {{ row.huabei }}
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.currentPage"
          :limit.sync="listQuery.pageSize"
          @pagination="getChannelDevice"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getRiskClueList, getList } from '@/api/advertising';
import waves from '@/directive/waves'; // waves directive
import Pagination from '@/components/Pagination'; // secondary package based on el-pagination
export default {
  name: 'Phonelist',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      tableData: [],
      total: 0,
      nan: '男',
      nv: '女',
      tableKey: 0,
      selectArr: [],
      listQuery: {
        currentPage: 1,
        accountName: '',
        userId: '',
        accountId: '',
        pageSize: 10
      },
      listQuery1: {
        avatar: '',
        current: 1,
        nickName: '',
        password: '',
        phonenumber: '',
        remark: '',
        size: 999,
        state: '',
        userName: ''
      },
      listLoading: false,
      mechanismName: [],
      btnLoading: false
    };
  },
  created() {
    this.getChannelDevice(this.listQuery);
    getList(this.listQuery1).then(res => {
      if (res.data.code === 200) {
        this.selectArr = res.data.data.records;
      }
    });
  },
  methods: {
    handleClick(tab) {
      this.tabActive = tab.index;
      this.handleFilter();
    },
    getSelect(val) {
      this.listQuery.accountId = val.userId;
      this.listQuery.accountName = val.nickName;
    },
    timestampToTime(timestamp) {
      const date = new Date(parseInt(timestamp));
      var Y = date.getFullYear() + '-';
      var M =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-';
      var D =
        (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      var h =
        (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      var m =
        (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) +
        ':';
      var s =
        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    // 获取用户列表
    async getChannelDevice(listQuery) {
      const res = await getRiskClueList(this.listQuery);
      if (res.data.code === 200) {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
      } else {
        this.$notify({
          title: '错误',
          message: res.data.msg,
          type: 'fail',
          duration: 2000
        });
      }
    },
    handleFilter() {
      this.listQuery.current = 1;
      this.getChannelDevice(this.listQuery);
    }
  }
};
</script>

<style scoped>
.pic {
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}

.ok {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(35, 248, 124);
}

.fail {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}

.info {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
}

.info-name {
  margin-left: 50px;
  margin-top: 10px;
  color: rgb(172, 176, 177);
}

.title {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: 400;
}

.box {
  margin-top: 10px;
  width: 100%;
  border: solid rgb(138, 219, 230) 2px;
}

.nick {
  font-size: 30px;
  font-weight: 600;
}

.link-top {
  margin-left: 10px;
  margin-top: 10px;
  width: 100%;
  height: 2px;
  border-top: solid rgb(138, 219, 230) 2px;
}

.link-title {
  margin-left: 10px;
  margin-top: 10px;
  width: 80px;
  height: 2px;
  border-top: solid rgb(172, 176, 177) 2px;
}

.edit-input {
  padding-right: 100px;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.errorInfo {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 130px;
}
</style>
